package com.devo.icecream.ui.advertising

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import com.devo.icecream.R
import com.devo.icecream.data.Advertising
import com.devo.icecream.ui.theme.IcecreamTheme
import com.devo.icecream.ui.theme.Main
import com.devo.icecream.utils.noRippleClickable
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.PagerState
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.delay

@OptIn(ExperimentalPagerApi::class)
@Composable
fun AdvertScreen(adverts: List<Advertising>, onClick: () -> Unit = {}) {
    val urls = adverts.map { it.picture }
    val index = remember(adverts) {
        mutableStateOf(urls.size)
    }

    val pagerState = rememberPagerState()

    Box(modifier = Modifier
        .fillMaxSize()
        .noRippleClickable { onClick() }
    ) {
        HorizontalPager(count = urls.size, state = pagerState) {
            AsyncImage(
                modifier = Modifier.fillMaxHeight(),
                model = urls[it],
                contentScale = ContentScale.FillHeight,
                contentDescription = ""
            )
        }

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.BottomCenter),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(modifier = Modifier.weight(1f))
            PagerIndicator(pagerState)
            Spacer(modifier = Modifier.height(24.dp))
            BottomButton()
        }

    }

    LaunchedEffect(null) {
        while (true) {
            delay(5 * 1000)
            if (pagerState.pageCount < 1) continue
            index.value += 1
            pagerState.animateScrollToPage(index.value % pagerState.pageCount)
        }
    }
}

@OptIn(ExperimentalPagerApi::class)
@Composable
private fun PagerIndicator(pagerState: PagerState) {
    LazyRow {
        itemsIndexed((0 until pagerState.pageCount).toList()) { index, _ ->
            if (index > 0) {
                Spacer(modifier = Modifier.width(10.dp))
            }
            Box(
                modifier = Modifier
                    .size(18.dp)
                    .clip(CircleShape)
                    .background(
                        if (index == pagerState.targetPage) Main else Color.White
                    ),

                )
        }
    }
}

@Composable
private fun BottomButton() {

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max)
            .background(Main.copy(alpha = 0.5f)),
        contentAlignment = Alignment.Center
    ) {

        Row(
            modifier = Modifier
                .padding(vertical = 16.dp)
                .height(80.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                modifier = Modifier.padding(vertical = 10.dp),
                painter = painterResource(id = R.mipmap.click),
                contentScale = ContentScale.FillHeight,
                contentDescription = ""
            )

            Spacer(modifier = Modifier.width(8.dp))

            Text(text = "轻点屏幕 下单制作", color = Color.White, style = MaterialTheme.typography.h1)
        }
    }

}


@Preview
@Composable
fun PreviewAdvert() {
    IcecreamTheme {
        val advert =
            Advertising(picture = "http://120.78.159.86:6689/file/202112/7abf5fc3840784f926e57694704eb4bf.png")
        val adverts = MutableList(3) {
            advert.copy()
        }
        AdvertScreen(adverts = adverts)
    }
}